<template>
  <div
    class="relative mx-auto p-[15px] w-[290px] h-[auto] rounded-[10px] border-[1px] border-[#626161] border-solid"
  >
    <div
      class="flex items-center justify-between mb-[15px]"
      v-if="props.layoutItem.ifDataSource"
    >
      <span class="whitespace-nowrap text-[#ccc] text-[14px] mr-[10px]"
        >数据源</span
      >
      <el-input
        disabled
        v-model="props.layoutItem.dataSourceInfo.serviceName"
      />
    </div>
    <div
      class="flex items-center justify-between mb-[15px]"
      v-if="!props.layoutItem.ifDataSource"
    >
      <span class="whitespace-nowrap text-[#ccc] text-[14px] mr-[10px]"
        >请求地址</span
      >
      <el-input disabled v-model="states.baseUrl" />
    </div>
    <div class="flex items-center justify-between mb-[15px]">
      <span class="whitespace-nowrap text-[#ccc] text-[14px] mr-[10px]"
        >请求方式</span
      >
      <el-input disabled v-model="states.method" />
    </div>
    <div class="flex items-center justify-start mb-[15px]">
      <span class="whitespace-nowrap text-[#ccc] text-[14px] mr-[10px]"
        >是否轮询</span
      >
      <el-switch disabled v-model="states.ifPolling" />
    </div>
    <div
      v-if="states.pollingTime"
      class="flex items-center justify-start mb-[15px]"
    >
      <span class="whitespace-nowrap text-[#ccc] text-[14px] mr-[10px]"
        >轮询时间</span
      >
      <el-input disabled v-model="states.pollingTime" />
    </div>
    <div class="flex items-center justify-between mb-[15px]">
      <span class="whitespace-nowrap text-[#ccc] text-[14px] mr-[10px]"
        >请求参数</span
      >
      <el-input
        v-if="Object.keys(states.params).length != 0"
        type="textarea"
        disabled
        v-model="params"
      />

      <el-input
        disabled
        v-if="Object.keys(states.data).length != 0"
        type="textarea"
        v-model="datas"
      />
    </div>

    <div
      class="opacity-0 hover:opacity-100 transition-all cursor-pointer flex items-center justify-center w-[100%] h-[100%] rounded-[10px] absolute top-0 left-0 bg-[rgba(35,35,36,0.8)] border border-solid border-[rgba(81,214,169,1)]"
    >
      <div
        @click="openEdit"
        class="w-[70px] h-[30px] leading-[30px] text-center bg-[rgba(81,214,169,0.2)] text-[var(--active-color)]"
      >
        配置
      </div>
    </div>
  </div>

  <div
    class="w-[290px] px-[15px] mt-[10px] flex flex-row items-center justify-between"
  >
    <span
      class="whitespace-nowrap select-none text-[12px] text-[var(--el-text-color-primary)]"
      >测试</span
    >

    <div
      @click="sendQuery"
      class="hover:bg-[rgba(81,214,169,0.2)] cursor-pointer flex items-center h-[34px] justify-center w-[220px] border border-solid border-[#3a89fe] rounded-md"
    >
      <el-icon color="#3a89fe" size="21"><Compass /></el-icon>

      <span
        class="ml-[3px] whitespace-nowrap text-[15px] text-[var(--active-color)]"
        >发送请求</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, watch } from "vue";
const emit = defineEmits(["update:request", "openEdit", "sendQuery"]);
const props = defineProps({
  request: {
    type: Object,
    default: () => ({}),
  },
  layoutItem: {
    type: Object,
    default: () => ({}),
  },
});
const states: any = computed({
  get: () => props.request,

  set: () => emit("update:request"),
});

let params = ref(JSON.stringify(props.request.params));
let datas = ref(JSON.stringify(props.request.data));
watch(
  () => props.request,
  () => {
    if (Object.keys(props.request.params).length > 0) {
      params.value = JSON.stringify(props.request.params);
    }
    if (Object.keys(props.request.data).length > 0) {
      datas.value = JSON.stringify(props.request.data);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
const openEdit = () => {
  emit("openEdit");
};
const sendQuery = () => {
  emit("sendQuery", states.value);
};
</script>

<style scoped lang="scss">
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background: #39393e !important;
}
:deep(.el-input.is-disabled .el-input__wrapper, ) {
  background: #39393e !important;
  box-shadow: none !important;
}

:deep(.el-textarea.is-disabled .el-textarea__inner) {
  box-shadow: none !important;
}
</style>
